<template>
  <el-select
    :value="selectedValues"
    multiple
    filterable
    allow-create
    default-first-option
    @focus="onfocus"
    @change="onchange"
    size="mini"
    style="width:100%"
    placeholder="请选择文章标签"
  >
    <el-option
      v-for="item in allOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    selections: {
      type: Array,
    },
    index: {
      type: Number,
    },
    selectorId:{
      type: String
    }
  },
  watch:{
    selectorId()
    {
      this.onfocus();
    }
  },
  computed: {
    allOptions() {
      var options = [];
      if (this.options.length == 0)
        options = this.selections.filter((s) => true);
      else options = this.options;
      return options;
    },
    selectedValues() {
      var values = [];
      this.selections.forEach((o) => {
        values.push(o.id);
      });
      return values;
    },
  },
  data() {
    return {
      options: [],
    };
  },
  methods: {
    onfocus() {
      this.$store
        .dispatch("workflow/getUserSelectionsOfUserSelector", {
          userSelectorId: this.selectorId,
        })
        .then((res) => {
          console.log(res);
          this.options = res;
        });
    },
    onchange(values){
       this.$emit("ok-click", {index:this.index,value:this.options.filter(o=>values.indexOf(o.id)>-1)});
    }
  },
};
</script>